<template>
	<view class="container">
		<view class="s-from">
			请输入{{phone}}收到的短信验证码
		</view>
		<view class="s-code">
			<input type="number" maxlength="6" @input="input_code" placeholder="请输入验证码" class="s-code-input"/>
			<view class="s-send-code s-btn-color2" @click="checking" v-if="state===false">获取验证码</view>
			<view class="s-send-code s-btn-color1" v-else>倒计时{{ currentTime }}s</view>
		</view>
		<view class="s-btn s-btn-color1" v-if="code==''">确定</view>
		<view class="s-btn s-btn-color2" @tap="binding_phone" v-else>确定</view>
	</view>
	
</template>
<script>
	import EditPhone from './edit_phone-model.js'   
	var edit_phone = new EditPhone();  
	export default {
		data() {
			return {
				state: false,		//是否开启倒计时
				totalTime: 60,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				phone:'',//手机号
				code:'',//验证码
			}
		},
		onShow(){
			var that = this;
			that.my();
		},
		methods: {
			// 我的信息
			my(){
				var that = this;
				edit_phone.my((res)=>{
					if(res.code==8888){
						if(res.data.phone == ""){
							my.navigate_to('../login/login');
							return;
						}
						that.phone = res.data.phone;
					}
				})
			},
			//获取code值
			input_code(e){
				var that = this;
				that.code = edit_phone.get_input_val(e);
			},
			//确定
			binding_phone(){
				var that = this;
				var phone = that.phone;
				var code = that.code;
				if(!edit_phone.is_phone_number(phone)){
					edit_phone.show_tips({title: '请输入正确的手机号！'});
					return;
				}
				if(!edit_phone.is_code_number(code)){
					edit_phone.show_tips({title: '请输入正确的验证码！'});
					return;
				}
				
				var data = {
					code:code,
					phone:phone
				};
				edit_phone.verdict_code(data,(res)=>{
					if(res.code == 8888){
						edit_phone.navigate_to('../edit_phone_confirm/edit_phone_confirm');
					}
				})
			},
			//点击获取验证码
			checking() {
				var that = this;
				var phone = that.phone;
				if(!edit_phone.is_phone_number(phone)){
					edit_phone.show_tips({title: '请输入正确的手机号'});
					return;
				}
				//把显示时间设为总时间
				that.currentTime = this.totalTime;
				edit_phone.send_code(phone,(res)=>{
					if(res.code == 8888){
						//开始倒计时
						that.state = true;
						//执行倒计时
						that.checkingTime();
						edit_phone.show_tips({title: res.msg});
					}
				})
			},
			checkingTime(){
				var that = this;
				//判断是否开启
				if(that.state){
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if(that.currentTime > 0 && that.recordingTime <= that.totalTime){
						//记录时间增加 1
						that.recordingTime = that.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						that.currentTime = that.totalTime - that.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					}else{
						//时间已完成，还原相关变量
						that.state = false;		//关闭倒计时
						that.recordingTime = 0;	//记录时间为0
						that.currentTime = that.totalTime;	//显示时间为总时间
					}
				}else{
					//倒计时未开启，初始化默认变量
					that.state = false;
					that.recordingTime = 0;
					that.currentTime = that.totalTime;
				}
			}
		}
	}
</script>

<style>
	@import url("edit_phone.css");
</style>
